HEXO 一日搭建个人博客
在一周之内刚接触了Git和HEXO，兴趣使然，请教了身边的大神同学，翻阅了网络上各种嘈杂的信息，
终于在一天内搭起了依托在GitHub上，以HEXO为建站模板的个人博客，由于各家博文各有自己的一套教程，
也走了不少弯路，许多问题并搜索不到，踩过坑后，打算写下自己的建站过程，希望有幸被人看到后其能有
收获。个人能力有限，还请大神们不吝赐教，通过提交Pull request，发布Issue，来指正说明。
以下步骤基于Windows操作系统，Linux系统(Git操作更方便，命令行替换为终端)和Mac系统会有不同
准备
配置Node.js环境
下载
通过Node.js 中文网下载
Node.js不大,但我下载时遇到问题,可以把下载方式改为IE下载试试
根据自己的操作系统和位数下载对应的版本
安装
打开安装程序,可根据实际情况适当修改,为避免未知的问题,最好保持默认设置,一路Next,Finish!
检查组件是否安装完毕,可打开命令行
(win+R,输入cmd 或 shift+鼠标右键 打开命令提示行 或 Powershell),输入:
node -v
npm -v
出现版本信息即为安装成功(npm为Node.js的管理工具)
配置Git环境
下载
- 通过Git for Windows下载
- Linux的Ubuntu、Debian新版本系统用户可打开终端输入
$ sudo apt-get install git命令一键安装 - 其他版本请自行百度
安装
打开安装程序,可根据实际情况适当修改,为避免未知的问题,最好保持默认设置,一路Next,Finish！
为了操作方便(使用命令行操作Git)此处最好这样选择
检查Git是否安装成功,打开命令行,输入
git --version
出现版本信息即为安装成功
Node.js环境和Git环境配置好如下
配置GitHub
注册账号
(已有账号请直接登录)
一定要进邮箱验证账号
创建Repository
点击右上角+,选择New repository
在Create a new repository页面,Repository name填username.github.io,Description (optional)填一些简单的描述(可选):
因为我已经创建了这个repository,所以显示已存在
开启GitHub Pages功能
正确创建repository后,点开页面顶部的Settings(旧版GitHub网页在右侧,新版已改在顶部):
新版GitHub已经没有Automatic page generator选项,那么Source下的branch选择master branch,save!
Theme Chooser可根据自己喜好选择(只为了浏览用,后面HEXO部署完会覆盖掉)
稍等片刻,便可打开https://username.github.io/浏览
如果PC端、移动端访问都没问题的话,GitHub的配置就完成了!
配置HEXO
安装
找一个合适的路径新建一个文件夹,在文件夹空白处Shift+鼠标右键,然后点击在此处打开Powershell(或命令行)窗口
在Powershell窗口输入:
npm install hexo-cli -g
(如果你看见WARN,不用担心,不影响操作,不是Error就行)
继续输入:
npm install hexo --save
Powershell窗口出现一堆字后,检验是否安装成功,输入:
hexo -v
这样就安装好了
初始化HEXO
在该路径下再新建一个文件夹(要不会提示该文件夹不是空的),输入:
hexo init
等窗口处理完后,输入:
npm install
npm会自动安装需要的组件,等待完成即可
体验HEXO
在Powershell窗口输入:
hexo generate
生成静态文件(hexo generate命令可简写为hexo g)
继续输入:
hexo server
启动服务器,默认情况下,访问网址为:http://localhost:4000/ (hexo server命令可简写为hexo s)
提示INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.即为成功
(请勿关闭Powershell窗口,否则有可能打不开)打开浏览器,输入http://localhost:4000/ 浏览你的个人博客!
你的初始页面会与我改动过的不同
至此,HEXO的配置就完成了!
配置Deployment
为本地repository指定GitHub username和email(你的username和email)
打开Powershell,输入:
git config --global user.name "username"
git config --global user.email "email"
配置_config.yml文件
修改yml文件请使用YAML Lint验证语法的合法性
(最好不使用Windows自带的记事本文件避免未知错误,可使用Notepad++)
在文件夹中找到_config.yml文件,打开文本编辑器,在文件末端找到# Deployment,如下修改:
deploy:
type: git
#repository: https://github.com/username/username.github.io.git
repository: git@github.com:username/username.github.io.git
branch: master
不同教程的_config.yml文件配置方法多有不同,最终我用了这种方法才成功配置
(username是你的username)
如果想了解更多,移步HEXO官方文档去探索吧!
在Powershell窗口输入:
hexo deploy
部署网站。(hexo deploy可以简写为:hexo d)
(如果使用git方式进行部署,窗口内输入:
npm install hexo-deployer-git --save
来安装所需的插件)
随后会弹出小窗口,分别输入自己的Github username和password，开始上传
然后通过http://username.github.io/ 来访问自己刚刚上传的网站!
添加新文章
新建.md类型的文件
在根目录(hexo文件夹)的source文件夹下的_posts文件夹里新建一个.md类型的文件
写作
在文章顶部写上一些yml信息,也就是文章的信息
---
title: hello-world //在此处添加你的标题。
date: 2017-7-24 15:00:00 //在此处输入你编辑这篇文章的时间。
categories: Exercise //在此处输入这篇文章的分类。
toc: true //在此处设定是否开启目录，需要主题支持。
---
接下来你就可以写作了,文本格式要按Markdown写,
怎么写Markdown格式文本?请参考简书给出的Markdown新手指南,保存
浏览
- 在根目录下执行
hexo g生成静态文件hexo s可以本地浏览你的博客 hexo clean清除缓存文件和已生成的静态文件,hexo d -g生成静态文件后部署,可以在http://username.github.io/ 上访问你的博客
进阶
如果你追求更酷的写作方式,请参考HEXO官方文档用指令操作
图床
如果你嫌所有图片都存在GitHub访问速度会变慢,可以尝试使用[七牛云存储]作为博客图床(存储图片视频的空间),七牛云有标准存储永久10G免费空间,每月HTTP下载流量10GB国内+10GB海外,标准存储每月Put/Delete 10万次算是很良心了,普通博客申请个免费用户很够用了!图片存储前最好先压缩一下,以减小存储空间和加速访问如果你对七牛云存储有需求的话,可通过我的邀请链接注册,这样,我能够获得更大的下载流量 😃
ps. 因为七牛云测试域名回收，现已改用腾讯云COS
更换域名
想要一个更个性化,更方便记忆的域名,可以自行购买属于自己的域名
主流域名注册商:世界老牌Godaddy,中国两大域名注册商阿里云,腾讯云,国内顶级互联网服务商新网
其中阿里云收购了万网,腾讯云收购了DNSPod
如果你对阿里云的业务有需求，可以领券
以下我用Godaddy购买的域名和DNSPod解析为例:
购买
挑选心仪的域名,加入购物车
结账,一般都会有优惠,可以百度Godaddy促销码,支持支付宝付款
域名解析
打开DNSPOD,
注册,登录,
添加域名,输入你购买的域名,复制下面两个记录值
f1g1ns1.dnspod.net.
f1g1ns2.dnspod.net.
进入GODADDY’域名管理’界面,
DNS’管理区域’,
更改’域名服务器’,
将复制的两个记录值填进去,保存,这样你的网址就由DNSPod托管了
域名解析(把你的域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站一种服务)
主机记录就是域名前缀，常见用法有:
www:解析后的域名为(例如:www.azha.site)
@:直接解析主域名(例如:azha.site)
:泛解析，匹配其他所有域名(例如:.azha.site)
记录类型：
要指向空间商提供的IP地址,选择「类型 A」,要指向一个域名,选择「类型 CNAME」
A记录:地址记录,用来指定域名的IPv4地址(如:8.8.8.8),如果需要将域名指向一个IP地址,就需要添加A记录
CNAME:如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录
TXT:在这里可以填写任何东西,长度限制255.绝大多数的TXT记录是用来做SPF记录(反垃圾邮件)
NS:域名服务器记录,如果需要把子域名交给其他DNS服务商解析,就需要添加NS记录
AAAA:用来指定主机名(或域名)对应的IPv6地址(例如:ff06:0:0:0:0:0:0:c3)记录
MX:如果需要设置邮箱,让邮箱能收到邮件,就需要添加MX记录
显性URL:从一个地址301重定向到另一个地址的时候,就需要添加显性URL记录(注:DNSPod目前只支持301重定向)
隐性URL:类似于显性URL,区别在于隐性URL不会改变地址栏中的域名
SRV:记录了哪台计算机提供了哪个服务.格式为:服务的名字,点,协议的类型,例如:_xmpp-server._tcp
如下修改:(CNAME一栏填入你的域名,其他A类型的记录值指向GitHub的IP地址)
192.30.252.153
192.30.252.154
新建CNAME文件
在hexo根目录下的source文件夹中，新建一个CNAME文件(注意，没有后缀名),内容为yourdomin.xxx(你的域名)
再执行一下hexo d -g,重新上传自己的博客
在github中打开你自己的repositories，进入repositories的setting界面,如果看到了如下提示,说明配置成功了
这样,别人就可以通过你的域名访问你的博客了!
添加评论模块
国内的大多数第三方评论插件都倒的差不多了,这里采用更坑爹的Disqus(需要科学上网才能显示),
但是Disqus配置最为方便,是HEXO支持的插件,不需要额外配置,
注册Disqus账号,Add Disqus to tour site
填入相应的信息,记住你的shortname
进入主题(Themes文件夹里的相应的主题)配置文件_config.yml文件
加入disqus: yourshortname开启评论
科学上网才可见 😃
添加统计功能
目前好多主题已经集成了统计模块,
这里采用yilia主题和百度统计进行数据分析:
注册百度站长账号(不知道为什么不能用原有的百度账号),新增网站,获取代码,
复制hm.src = "https://hm.baidu.com/hm.js?之后的一串字符串,
粘贴至主题(Themes文件夹里的相应的主题)配置文件_config.yml文件
baidu_analytics:字段后,
重新部署,这样,你就可以在百度统计网站看到你自己的数据了
(若要在你的网站上显示,需要导出数据,需要你的网站浏览量PV大于100才能开通)
yilia主题的个性化配置
这里推荐几个不错的参考
修改Yilia左下角SubNav的社交图标
在Hexo中自动为Yilia主题增加版权声明
添加 hexo yilia 主题的文章阅读量
ps.我遇到不少坑，最后只能卸载所有工具，重新配置才可以🤷
完成
至此,已完成大部分博客的基本功能,若追求更佳的扩展体验,自己折腾才是最好的办法!
可以通过访问http://username.github.io/ 或者yourdomain.xxx来访问自己博客了!
Enjoy~
更新日志
- 2017.7.20 首次发布
- 2017.7.24 添加
_config.yml文件的检验网站和HEXO官方文档 - 2017.7.24 加入’添加新文章’,’更换域名’,’添加评论模块’,’添加统计功能’方面知识
- 2018.9.15 添加yilia主题的个性化配置参考